# Botón / Button

### Código

```
<button></button>
```

### Tokens

**Color de botón primario**

| Clase               | Propiedad        | Token             |
| :------------------ | :--------------- | :---------------- |
| `.bx--btn--primary` | text color       | `$text-04`        |
| `.bx--btn__icon`    | svg              | `$icon-03`        |
| `.bx--btn--primary` | background-color | `$interactive-01` |
| `:hover`            | background-color | `$hover-primary`  |
| `:active`           | background-color | `$active-primary` |
| `:focus`            | border           | `$focus`          |
| `:focus`            | inset            | `$ui-background`  |
| `:disabled`         | background-color | `$disabled-02`    |
| `:disabled`         | text color       | `$disabled-03`    |
| `:disabled`         | svg              | `$disabled-03`    |

**Color de botón secundario**

| Clase                 | Propiedad        | Token               |
| :-------------------- | :--------------- | :------------------ |
| `.bx--btn--secondary` | text color       | `$text-04`          |
| `.bx--btn__icon`      | svg              | `$icon-03`          |
| `.bx--btn--secondary` | background-color | `$interactive-02`   |
| `.bx--btn--secondary` | border           | `$interactive-02`   |
| `:hover`              | background-color | `$hover-secondary`  |
| `:active`             | background-color | `$active-secondary` |
| `:focus`              | border           | `$focus`            |
| `:focus`              | inset            | `$ui-background`    |
| `:disabled`           | background-color | `$disabled-02`      |
| `:disabled`           | text color       | `$disabled-03`      |
| `:disabled`           | svg              | `$disabled-03`      |

**Color de botón terciario**

| Clase                | Propiedad        | Token              |
| :------------------- | :--------------- | :----------------- |
| `.bx--btn--tertiary` | text color       | `$interactive-03`  |
| `.bx--btn__icon`     | svg              | `$interactive-03`  |
| `.bx--btn--tertiary` | background-color | `transparent`      |
| `.bx--btn--tertiary` | border           | `$interactive-03`  |
| `:hover`             | text color       | `$inverse-01`      |
| `:hover`             | svg              | `$icon-03`         |
| `:hover`             | background-color | `$hover-tertiary`  |
| `:active`            | background-color | `$active-tertiary` |
| `:focus`             | background-color | `$interactive-03`  |
| `:focus`             | border           | `$focus`           |
| `:focus`             | inset            | `$ui-background`   |
| `:disabled`          | background       | `transparent`      |
| `:disabled`          | border           | `$disabled-02`     |
| `:disabled`          | text color       | `$disabled-03`     |
| `:disabled`          | svg              | `$disabled-02`     |

**Color de botón fantasma**

| Clase             | Propiedad        | Token                 |
| :---------------- | :--------------- | :-------------------- |
| `.bx--btn--ghost` | text color       | `$link-01`            |
| `.bx--btn__icon`  | svg              | `$link-01`            |
| `.bx--btn--ghost` | background-color | –                     |
| `:hover`          | text color       | `$hover-primary-text` |
| `:hover`          | svg              | `$hover-primary-text` |
| `:hover`          | background-color | `$hover-ui`           |
| `:active`         | background-color | `$active-ui`          |
| `:focus`          | border           | `$focus`              |
| `:disabled`       | text color       | `$disabled-03`        |
| `:disabled`       | svg              | `$disabled-02`        |

**Color de botón de peligro**

| Clase                       | Propiedad        | Token            |
| :-------------------------- | :--------------- | :--------------- |
| `.bx--btn--danger--primary` | text color       | `$text-04`       |
| `.bx--btn__icon`            | svg              | `$icon-03`       |
| `.bx--btn--danger--primary` | background-color | `$danger-01`     |
| `:hover`                    | background-color | `$hover-danger`  |
| `:active`                   | background-color | `$active-danger` |
| `:focus`                    | border           | `$focus`         |
| `:focus`                    | inset            | `$ui-background` |
| `:disabled`                 | background-color | `$disabled-02`   |
| `:disabled`                 | text color       | `$disabled-03`   |
| `:disabled`                 | svg              | `$disabled-03`   |

**Tipografía**

| Clase                  | Token            |
| :--------------------- | :--------------- |
| `.bx--btn`             | `$body-short-01` |
| `.bx--btn--expressive` | `$body-short-02` |

**Estructura**

| Clase                      | Propiedad                   | Token         |
| :------------------------- | :-------------------------- | :------------ |
| `.bx--btn`                 | padding-left                | `$spacing-05` |
| `.bx--btn`                 | padding-right               | –             |
| `.bx--btn--sm`             | padding-left                | `$spacing-05` |
| `.bx--btn--sm`             | padding-right               | –             |
| `.bx--btn--ghost`          | padding-left, padding-right | `$spacing-05` |
| `.bx--btn__icon`           | margin-left, margin-right   | `$spacing-05` |
| `svg`                      | size                        | –             |
| `.bx--btn--expressive svg` | size                        | –             |
| `:focus`                   | box-shadow: inset           | –             |